<!-- gofurry-cloud head -->

<!-- 引入自定义字体 -->
<!-- <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-regular.min.css"> -->

<!-- 修改样式 -->
<style>
  .hope-ui-light,
  .hope-ui-dark {
    --hope-colors-background: transparent;
  }

  /* 设置背景图片样式 */
  body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
  }

  /* 暗 修改背景图片地址 */
  body.hope-ui-dark {
    background-color: rgb(32, 36, 37);
    background-image: linear-gradient(
        rgba(32, 36, 37, 0.8),
        rgba(32, 36, 37, 0.8)
      ),
      url("https://www.gofurry-cloud.com:9998/gf_cloud/api/ol/util/getImage");
    /* GoFurry-CLoud-Service 本地API */
  }

  /* 亮 修改背景图片地址 */
  body.hope-ui-light {
    background-color: rgb(32, 36, 37);
    background-image: linear-gradient(
        rgba(32, 36, 37, 0.7),
        rgba(32, 36, 37, 0.7)
      ),
      url("https://www.gofurry-cloud.com:9998/gf_cloud/api/ol/util/getImage");
    /* GoFurry-CLoud-Service 本地API */
  }
</style>

<!-- 调整透明度 -->
<script type="module">
  // v3

  // 提供用来监听代码控制的 url 变化的事件
  (() => {
    const wrapHistoryMethod = (type) => {
      const orig = history[type];
      return function (...args) {
        const rv = orig.apply(this, args);
        const event = new CustomEvent(type, { detail: args });
        window.dispatchEvent(event);
        return rv;
      };
    };
    history.pushState = wrapHistoryMethod("pushState");
    history.replaceState = wrapHistoryMethod("replaceState");
  })();

  class Beautifier {
    /**
     * Beautifier 类用于美化页面背景色
     *
     * 其提供了3个方法：
     * - observe: 开始监听页面变化并美化背景色
     * - disconnect: 停止监听页面变化
     * - undo: 恢复页面背景色到默认状态
     *
     * 可以通过window.beautifier访问实例对象
     *
     */
    static ignoredSelectors = [
      ".hope-tooltip",
      ".hope-tooltip__arrow",
      ".hope-checkbox__control",
      ".hope-modal__overlay",
      "button:not(.hope-menu__trigger)",
      "svg",
    ];

    static getSelector(mainSelector) {
      return `${mainSelector} :not(${Beautifier.ignoredSelectors.join(
        "):not("
      )})`;
    }

    static lightSelector = Beautifier.getSelector(".hope-ui-light");
    static darkSelector = Beautifier.getSelector(".hope-ui-dark");

    static lightBgColor = "rgba(255, 255, 255, 0)";
    static darkBgColor = "rgba(32, 36, 37, 0)";

    static specificPrefix = "rgba(132, 133, 141";

    constructor() {
      this.observer = null;
    }

    /**
     * @param {'light'|'dark'} theme
     */
    #rewriteBgColor(theme) {
      let selector =
        theme === "light" ? Beautifier.lightSelector : Beautifier.darkSelector;
      let bgColor =
        theme === "light" ? Beautifier.lightBgColor : Beautifier.darkBgColor;

      document.querySelectorAll(selector).forEach((element) => {
        const computedStyle = getComputedStyle(element);

        if (computedStyle.backgroundImage !== "none") {
          return;
        }

        if (
          computedStyle.backgroundColor !== "rgba(0, 0, 0, 0)" &&
          !computedStyle.backgroundColor.startsWith(Beautifier.specificPrefix)
        ) {
          element.style.backgroundColor = bgColor;
          element.setAttribute("data-beautified", "true");
        }
      });
    }

    #beautify() {
      if (
        !location.pathname.startsWith("/@manage") &&
        !location.pathname.startsWith("/@login")
      ) {
        this.#rewriteBgColor("light");
        this.#rewriteBgColor("dark");
      }
    }

    observe() {
      this.observer = new MutationObserver(this.#beautify.bind(this));
      this.observer.observe(document.getElementById("root"), {
        childList: true,
        subtree: true,
      });

      this.#beautify();
    }

    disconnect() {
      if (this.observer) {
        this.observer.disconnect();
      }
    }

    undo() {
      this.disconnect();

      document.body.querySelectorAll("[data-beautified]").forEach((element) => {
        element.style.backgroundColor = "";
        element.removeAttribute("data-beautified");
      });
    }
  }

  const beautifier = new Beautifier();
  window.beautifier = beautifier;

  beautifier.observe();

  (() => {
    function fixLogin(pathname) {
      if (pathname.startsWith("/@login")) {
        beautifier.undo();
      } else {
        beautifier.disconnect();
        beautifier.observe();
      }
    }

    ["popstate", "pushState", "replaceState"].forEach((eventType) => {
      addEventListener(eventType, () => {
        fixLogin(location.pathname);
      });
    });
  })();
</script>
